<template>
	<div class="user">
		<PageHeader ref="headerRef" :form-data-config="formDataConfig" @update-form-data="updateFormData">
			<template #header>
				<h1>高级检索</h1>
			</template>

			<template #footer>
				<div class="footer">
					<el-button :icon="Refresh" type="info" @click="handleReset">重置</el-button>
					<el-button :icon="Search" type="primary" @click="handleSearch(formOptions)">搜索</el-button>
				</div>
			</template>
		</PageHeader>

		<PageContent ref="contentRef" page-name="users" :content-data-config="contentDataConfig" @click-edit="handleEdit">
			<template #headerHandler>
				<div class="header-handler">
					<el-button type="primary" @click="handleCreate">新建用户</el-button>
					<el-button :icon="Refresh"></el-button>
				</div>
			</template>
		</PageContent>

		<PageModel ref="modelRef" page-name="users" :default-value="defaultValue" :model-config="modelDataConfig"></PageModel>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

import PageHeader from "@/components/pageHeader/index.vue"
import PageContent from "@/components/PageContent/pageContent.vue"
import PageModel from "@/components/pageModel/pageModel.vue"
import { contentDataConfig } from "./config/contentDataConfig"
import { Refresh, Search } from "@element-plus/icons-vue"
import { formDataConfig } from "./config/formDataConfig"
import { modelDataConfig } from "./config/modelDataConfig"
import usePageMethods from "@/hooks/usePageMethod"
import useModelMethods from "@/hooks/useModelMethods"
import useGlobeStore from "@/store/globe"
const formOptions = ref({})
const globalStore = useGlobeStore()
const createCb = () => {
	const modelOptions = modelDataConfig.formData.find((item: any) => {
		return item.field === "password"
	})
	modelOptions!.isHidden = false
	modelDataConfig.title = "创建用户"
}
const editCb = () => {
	const modelOptions = modelDataConfig.formData.find((item: any) => {
		return item.field === "password"
	})
	modelOptions!.isHidden = true
	modelDataConfig.title = "编辑用户"
}
const { contentRef, headerRef, handleSearch, handleReset } = usePageMethods()
const { modelRef, defaultValue, handleCreate, handleEdit } = useModelMethods(createCb, editCb)
const updateFormData = (formOption: any) => {
	formOptions.value = formOption
}
const getDepartment = globalStore.getDepartment.map(item => {
	return {
		id: item.id,
		name: item.name
	}
})

const getRole = globalStore.getRole.map(item => {
	return {
		id: item.id,
		name: item.name
	}
})

modelDataConfig.formData.map(item => {
	if (item.type === "select" && item.field === "departmentId") {
		item.options?.push(...getDepartment)
		// console.log("item.options", item.options)
	}
	if (item.type === "select" && item.field === "roleId") {
		item.options?.push(...getRole)
	}
})
</script>

<style lang="less" scoped></style>
